<template>
    <div class="pageWarp">
        <div class="dap_warp" :style="{ transform: `scale(${scaleRatio})` }">
            <div class="dap_header">
                <div class="header_left">{{ dayweather }} {{ daytemp }}℃</div>
                <div class="header_centeer">贞一环境智慧运管中心</div>
                <div class="header_right">
                    <div>
                        <span>{{ timeYear }}</span>
                        <span class="text">年</span>
                        <span>{{ timeMonth }}</span>
                        <span class="text">月</span>
                        <span>{{ timeDay }}</span>
                        <span class="text">日</span>
                        <span class="pading">星期</span>
                        <span class="text">{{ currentWeek }}</span>
                        <span class="pading" style="display: inline-block;width: 100px;">{{ times }}</span>
                    </div>
                    <div @click="mapBlck" class="img">
                        <img style="width: 100%;" src="../imgModel/mapback.png" alt="">
                    </div>
                </div>
            </div>
            <div class="dap_biaoti">
                <div class="biaotiLeft"></div>
                <div class="biaoticenter">{{ arrowDownName }}</div>
                <div class="biaotiLeft">
                    <img @click="biaotiLeftImg" style="width: 100px;cursor: pointer;" src="../imgModel/homegongyi.png"
                        alt="">
                </div>
            </div>
            <div class="dap_bottom">
                <div class="dap_left">

                    <div class="mapleft_card" style="margin-right: 10px;">
                        <div class="maptitle maptitleFlex">
                            <div>处理水量</div>
                            <div class="maptitleflexText">
                                <div @click="timeShuiliang(1)" style="margin-right: 20px;color:#779DFF">查询</div>
                                <!-- <div style="background-color: rgba(0, 170, 255, 0.3);margin-top: -5px;">
                                    <el-date-picker @change="dataTimeChange" style="width: 310px;" v-model="valueData"
                                        type="datetimerange" range-separator="至" start-placeholder="开始日期"
                                        end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss">
                                    </el-date-picker>
                                </div> -->
                                <!-- <span @click="spanTextNum('today')" :class="{ 'spanColor': spanColorText == 'today' }"
                                    class="spanText">今日</span>
                                <span @click="spanTextNum('yesterday')"
                                    :class="{ 'spanColor': spanColorText == 'yesterday' }" class="spanText">昨日</span> -->
                                <!-- <span @click="spanTextNum('week')" :class="{ 'spanColor': spanColorText == 'week' }"
                                        class="spanText">近一周</span>
                                    <span @click="spanTextNum('month')"
                                        :class="{ 'spanColor': spanColorText == 'month' }" class="spanText">近一月</span> -->
                            </div>
                        </div>
                        <div v-if="isNumberData">
                            <lineMapChartStart :height="'245px'" :valueTimes="valueData" :num="spanColorText"
                                :isNumber="isNumberData" />
                        </div>
                    </div>
                    <div class="mapleft_card ">
                        <!-- <div class="maptitle">水质监测</div> -->
                        <div class="maptitle" style="display: flex;">
                            <div style="width: 90px;">水质监测</div>
                            <div style="flex: 1;text-align: center;">
                                <span @click="waterQualitySpanClick(1)"
                                    :class="{ 'waterQualitySpanColor': waterQualityType == 1 }"
                                    class="waterQualitySpan">COD</span>
                                <span @click="waterQualitySpanClick(2)"
                                    :class="{ 'waterQualitySpanColor': waterQualityType == 2 }"
                                    class="waterQualitySpan">氨氮</span>
                                <span @click="waterQualitySpanClick(3)"
                                    :class="{ 'waterQualitySpanColor': waterQualityType == 3 }"
                                    class="waterQualitySpan">总氮</span>
                                <span @click="waterQualitySpanClick(4)"
                                    :class="{ 'waterQualitySpanColor': waterQualityType == 4 }"
                                    class="waterQualitySpan">总磷</span>
                            </div>
                            <div @click="waterQualityFun()"
                                style="font-size: 16px;padding: 0 10px;color: #779DFF;cursor: pointer;width: 90px;">
                                新增记录</div>
                        </div>
                        <div v-if="groupId">
                            <lineAndebarMapChartStart :height="'245px'" :type="waterQualityType" :isNumber="groupId" />
                        </div>
                        <div v-if="false" class="maptitle" style="display: flex;justify-content: space-between;">
                            <div>水质监测</div>
                            <div @click="waterQualityFun()"
                                style="font-size: 16px;padding: 0 10px;color: #779DFF;cursor: pointer;">新增记录</div>
                        </div>
                        <div class="maptableleft" v-if="false">
                            <div class="maptable_list auto-scroll-row">
                                <div class="maptable_li" style="text-align: center;">COD</div>
                                <div class="maptable_li" style="text-align: center;">氨氮</div>
                                <div class="maptable_li" style="text-align: center;">总氮</div>
                                <div class="maptable_li" style="text-align: center;">总磷</div>
                                <div class="maptable_li" style="text-align: center;width: 100px;">时间</div>
                                <div class="maptable_li" style="text-align: center;width: 80px;">人员</div>
                            </div>
                            <AutoScrollModel height="20vh" :scrollSpeed="0.1" :bottomPause="1000" :smoothReturn="false"
                                :minDelta="0.1">
                                <div class="maptable_list auto-scroll-row" :key="index"
                                    v-for="(item, index) of waterQualityList">
                                    <div class="maptable_li" style="text-align: center;">{{ item.COD }}</div>
                                    <div class="maptable_li" style="text-align: center;">{{ item.NH4N }}</div>
                                    <div class="maptable_li" style="text-align: center;">{{ item.TN }}</div>
                                    <div class="maptable_li" style="text-align: center;">{{ item.TP }}</div>
                                    <div class="maptable_li" style="text-align: center;width: 100px;">{{ item.times }}
                                    </div>
                                    <div class="maptable_li" style="text-align: center;width: 80px;">{{ item.user }}
                                    </div>
                                </div>
                            </AutoScrollModel>
                        </div>
                    </div>
                    <div class="mapleft_card ">
                        <div class="maptitle">巡检记录</div>
                        <div class="maptableleft">
                            <div class="maptable_list auto-scroll-row">
                                <div class="maptable_li" style="text-align: left;">巡检人员</div>
                                <div class="maptable_li" style="text-align:center;">巡检内容</div>
                                <div class="maptable_li" style="text-align: right;">巡检时间</div>
                            </div>
                            <AutoScrollModel height="180px" :scrollSpeed="0.1" :bottomPause="1000" :smoothReturn="false"
                                :minDelta="0.1">
                                <div class="maptable_list auto-scroll-row" :key="index"
                                    v-for="(item, index) of mapInspection">
                                    <div class="maptable_li" style="text-align: left;">{{ item.userName }}</div>
                                    <div class="maptable_li" style="text-align:center;">{{ item.inspectionContent }}
                                    </div>
                                    <div class="maptable_li" style="text-align: right;">{{ item.inspectionDate }}</div>
                                </div>
                            </AutoScrollModel>
                        </div>
                    </div>
                </div>
                <div class="dap_center">
                    <div class="center_img">
                        <img style="width: 95%;margin: 10px auto;" src="../imgUrl/mapThree3d.png" />
                    </div>
                    <div style="display: flex;" v-if="false">
                        <div class="mapleft_card" style="margin-right: 10px;">
                            <div class="maptitle maptitleFlex">
                                <div>处理水量统计</div>
                                <div class="maptitleflexText">
                                    <span @click="spanTextNum('today')"
                                        :class="{ 'spanColor': spanColorText == 'today' }" class="spanText">今日</span>
                                    <span @click="spanTextNum('yesterday')"
                                        :class="{ 'spanColor': spanColorText == 'yesterday' }"
                                        class="spanText">昨日</span>
                                    <span @click="spanTextNum('week')" :class="{ 'spanColor': spanColorText == 'week' }"
                                        class="spanText">近一周</span>
                                    <span @click="spanTextNum('month')"
                                        :class="{ 'spanColor': spanColorText == 'month' }" class="spanText">近一月</span>
                                </div>
                            </div>
                            <div>
                                <lineMapChartStart :height="'245px'" :num="spanColorText" :isNumber="isNumberData" />
                            </div>
                        </div>
                        <div class="mapleft_card " style="margin-right: 10px;">
                            <div class="maptitle">产泥统计</div>
                            <div>

                                <bar3DMapChartStart :groupIdData="groupId" :height="'245px'" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dap_right">
                    <div class="mapleft_card ">
                        <div class="mapleftSebei">
                            <div class="mapleftSebei_left">设备状态</div>
                            <div class="mapleftSebei_right">
                                <div class="rightSelect">
                                    <el-select @change="deviceValueFun" v-model="deviceValue" placeholder="请选择">
                                        <el-option v-for="item in deviceList" :key="item.identifier"
                                            :label="item.modelName" :value="item.identifier">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="rightTimes">
                                    <div @click="timeShuiliang(2)"
                                        style="margin-right: 20px;color:#779DFF;margin-left: 20px;">查询</div>
                                    <!-- <div :class="{ rightTimeSpanColor: rightTimeData == 1 }"
                                        @click="rightTimeSpanFun('1')" class="rightTimeSpan">半小时</div>
                                    <div :class="{ rightTimeSpanColor: rightTimeData == 2 }"
                                        @click="rightTimeSpanFun('2')" class="rightTimeSpan">2小时</div>
                                    <div :class="{ rightTimeSpanColor: rightTimeData == 3 }"
                                        @click="rightTimeSpanFun('3')" class="rightTimeSpan">24小时</div> -->
                                </div>
                            </div>
                        </div>
                        <div v-if="isNumberData">
                            <deviceLinChars :height="'245px'" :valueTimes="valueTimesTwo" :num="rightTimeData"
                                :deviceType="deviceValue" :isNumber="isNumberData" />
                        </div>
                        <!-- <div class="maptitle">进水统计</div>
                        <div>
                            <lineMapChartStart :height="'245px'" />
                        </div> -->
                    </div>
                    <div class="mapleft_card ">
                        <div class="maptitle" style="display: flex;justify-content: space-between;">
                            <div>运维记录</div>
                            <div @click="getMaintenanceFun('')"
                                style="font-size: 16px;padding: 0 10px;color: #779DFF;cursor: pointer;">新增记录</div>
                        </div>
                        <div>
                            <div class="maptableright">
                                <div class="maptable_list">
                                    <div class="maptable_li1One" style="justify-content: center;">站点名称</div>
                                    <div class="maptable_li2One">运维时间</div>
                                    <div class="maptable_li3One">运维人员</div>
                                </div>
                                <div style="height: 190px; overflow-x: hidden;  overflow-y: auto;">
                                    <AutoScrollModel height="180px" :scrollSpeed="0.1" :bottomPause="1000"
                                        :smoothReturn="false" :minDelta="0.1">
                                        <div @click="getMaintenanceFun(item.maintenanceId)"
                                            class="maptable_list auto-scroll-row" :key="index"
                                            v-for="(item, index) of listMaintenanceList">
                                            <div class="maptable_li1One">
                                                <!-- <img style="width: 18px;height: 18px;margin-right: 4px;"
                                                src="../imgUrl/maprihgtIocn.png" alt=""> -->
                                                <el-tooltip :content="item.groupName" placement="top-start">
                                                    <div class="maptable_li1Text"> {{ item.groupName }}</div>
                                                </el-tooltip>
                                            </div>
                                            <div class="maptable_li2One" style="text-align:left;">{{ item.createTime }}
                                            </div>
                                            <div class="maptable_li3One">{{ item.maintenanceUser }}</div>
                                        </div>
                                    </AutoScrollModel>
                                </div>
                            </div>
                            <!-- <lineMapChartStart :height="'245px'" /> -->
                        </div>
                    </div>
                    <div class="mapleft_card ">
                        <div class="maptitle" style="display: flex;justify-content: space-between;color: #779DFF;">
                            <div style="display: flex;cursor: pointer;">
                                <div @click="maptitleShishi(1)" :class="{ 'shishiText': shishiType == 1 }"
                                    style="margin-right: 10px;">实时报警</div>
                                <div :class="{ 'shishiText': shishiType == 2 }" @click="maptitleShishi(2)">实时提醒 </div>
                            </div>
                            <div v-if="shishiType == 2" @click="shishiClick()"
                                style="margin-right: 15px;color: #779DFF;cursor: pointer;">
                                添加
                            </div>
                        </div>
                        <div class="maptableright">
                            <AutoScrollModel v-if="shishiType == 1" height="220px" :scrollSpeed="0.1"
                                :bottomPause="1000" :smoothReturn="false" :minDelta="0.1">
                                <div class="maptable_list auto-scroll-row" :key="index"
                                    v-for="(item, index) of mapInspectionRight">
                                    <div class="maptable_li1">
                                        <img style="width: 18px;height: 18px;margin-right: 4px;"
                                            src="../imgUrl/maprihgtIocn.png" alt="">
                                        <el-tooltip :content="item.alertName" placement="top-start">
                                            <div class="maptable_li1Text"> {{ item.alertName }}</div>
                                        </el-tooltip>
                                    </div>
                                    <div class="maptable_li2" style="text-align:left;">{{ item.createTime }}</div>
                                    <div @click="maptableFun(item, 1)" class="maptable_li3">处理</div>
                                </div>
                            </AutoScrollModel>
                            <AutoScrollModel v-if="shishiType == 2" height="220px" :scrollSpeed="0.1"
                                :bottomPause="1000" :smoothReturn="false" :minDelta="0.1">
                                <div class="maptable_list auto-scroll-row" :key="index"
                                    v-for="(item, index) of listRemindList">
                                    <div class="maptable_li1" @click="shihsimaptableFun(item)"
                                        style="background: rgba(0, 170, 255, 0.08);">
                                        <i v-if="isMoreThanThreeDaysAgo(item.remindDate)"
                                            style="font-size: 20px;color: red;" class="el-icon-warning-outline"></i>

                                        <el-tooltip :content="item.groupName" placement="top-start">
                                            <div class="maptable_li1Text"
                                                :class="{ 'groupTitle': isMoreThanThreeDaysAgo(item.remindDate) }">
                                                {{
                                                    item.groupName
                                                }}</div>
                                        </el-tooltip>
                                    </div>
                                    <div class="maptable_li2" @click="shihsimaptableFun(item)"
                                        :class="{ 'groupTitle': isMoreThanThreeDaysAgo(item.remindDate) }"
                                        style="text-align:left;background: rgba(0, 170, 255, 0.08);">
                                        <el-tooltip :content="item.content" placement="top-start">
                                            <div class="maptable_li1Text"> {{ item.content
                                                }}</div>
                                        </el-tooltip>
                                    </div>
                                    <div class="maptable_li2" @click="shihsimaptableFun(item)"
                                        :class="{ 'groupTitle': isMoreThanThreeDaysAgo(item.remindDate) }"
                                        style="text-align:left;background: rgba(0, 170, 255, 0.08);">
                                        {{ item.remindDate }}
                                    </div>

                                    <div @click="maptableFun(item, 2)"
                                        :class="{ 'groupTitle': isMoreThanThreeDaysAgo(item.remindDate) }"
                                        style="background: rgba(0, 170, 255, 0.08);" class="maptable_li3">处理</div>
                                </div>
                            </AutoScrollModel>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dap_food"></div>
        <!-- 添加或修改设备告警对话框 -->
        <el-dialog title="报警处理" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="处理结果" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="8" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 添加或修改设备告警对话框 -->
        <el-dialog title="运维信息" :visible.sync="maintenanceOpen" custom-class="customClass" width="600px" append-to-body>
            <el-form ref="form" :model="maintenanceForm" label-width="80px" style="margin-bottom:30px;padding:20px">
                <el-form-item label="站点" prop="groupId">
                    <div style="color: wheat;font-size: 18px;">{{ arrowDownName }}</div>
                </el-form-item>
                <el-form-item label="运维人员" prop="maintenanceUser">
                    <el-input v-model="maintenanceForm.maintenanceUser" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="运维时间">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"
                        v-model="maintenanceForm.createTime" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="整体运维">
                    <el-input style="margin-top: 10px;" v-model="maintenanceForm.maintenanceContent" type="textarea"
                        placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="风机运维">
                    <div @click="fanContentArrayAdd"
                        style="text-align: right;width: 100%;color: green;cursor: pointer;">新增运维内容
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="fanContentCss" :key="index" v-for="(item, index) of fanContentArray">
                        <div class="fanContentCssLeft">
                            <el-select style="width: 100%;" v-model="item.fanContent" placeholder="请选择风机" clearable>
                                <el-option v-for="dict in dict.type.maintenance_fan_device" :key="dict.value"
                                    :label="dict.label" :value="dict.value" />
                            </el-select>
                            <el-input style="margin-top: 10px;" v-model="item.maintenanceContent" type="textarea"
                                placeholder="请输入内容" />
                        </div>
                        <div @click="fanContentArrayDel(index)" class="fanContentCssRight">
                            删除
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="omaintenancesubmitForm">确 定</el-button>
                <el-button @click="maintenanceOpen = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="水质监测" :visible.sync="waterQualityOpen" custom-class="customClass" width="600px"
            append-to-body>
            <el-form ref="form" :model="waterQualityForm" label-width="80px" style="margin-bottom:30px;padding:20px">
                <el-form-item label="监测站点" prop="groupId">
                    <div style="color: wheat;font-size: 18px;">{{ arrowDownName }}</div>
                </el-form-item>
                <el-form-item label="监测人员" prop="maintenanceUser">
                    <el-input v-model="waterQualityForm.maintenanceUser" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="监测时间">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"
                        v-model="waterQualityForm.createTime" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="COD">
                    <el-input-number v-model="waterQualityForm.cod" style="width: 100%;" :min="0" :max="100"
                        label="COD"></el-input-number>
                    <!-- <el-input style="margin-top: 10px;" v-model="waterQualityForm.cod" placeholder="请输入内容" /> -->
                </el-form-item>
                <el-form-item label="氨氮">
                    <el-input-number v-model="waterQualityForm.ammoniaNitrogen" style="width: 100%;" :min="0" :max="20"
                        label="氨氮"></el-input-number>
                    <!-- <el-input style="margin-top: 10px;" v-model="waterQualityForm.ammoniaNitrogen"
                        placeholder="请输入内容" /> -->
                </el-form-item>
                <el-form-item label="总氮">
                    <el-input-number v-model="waterQualityForm.totalNitrogen" style="width: 100%;" :min="0" :max="30"
                        label="总氮"></el-input-number>
                    <!-- <el-input style="margin-top: 10px;" v-model="waterQualityForm.totalNitrogen" placeholder="请输入内容" /> -->
                </el-form-item>
                <el-form-item label="总磷">
                    <el-input-number v-model="waterQualityForm.totalPhosphorus" style="width: 100%;" :min="0" :max="50"
                        label="总磷"></el-input-number>
                    <!-- <el-input style="margin-top: 10px;" v-model="waterQualityForm.totalPhosphorus"
                        placeholder="请输入内容" /> -->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="waterQualityFormSubmit">确 定</el-button>
                <el-button @click="waterQualityOpen = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 时间查询 -->
        <el-dialog title="时间查询" :visible.sync="openTimePicker" custom-class="customClass" width="400px" append-to-body>
            <el-form ref="form">
                <el-form-item>
                    <el-date-picker @change="dataTimePickerChange" style="width: 100%;" v-model="valueTimesPicker"
                        type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitTimePicker">确 定</el-button>
                <el-button @click="openTimePicker = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- //实时预警 -->
        <el-dialog title="实时提醒" :visible.sync="shishiOpen" custom-class="customClass" width="500px" append-to-body>
            <el-form ref="form" :model="shishiForm" label-width="auto" style="margin-bottom:30px;padding:20px">
                <el-form-item label="提醒站点" prop="groupId">
                    <div style="color: wheat;font-size: 18px;">{{ arrowDownName }}</div>
                </el-form-item>
                <el-form-item label="提醒时间">
                    <el-date-picker value-format="yyyy-MM-dd" style="width: 100%;" v-model="shishiForm.remindDate"
                        type="date" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="提醒内容">
                    <el-input style="margin-top: 10px;" v-model="shishiForm.content" type="textarea"
                        placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="shishiFormFormSubmit">确 定</el-button>
                <el-button @click="shishiOpen = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import autoScroll from 'vue-list-auto-scroll-tsc'
import bar3DMapChartshe from './model/bar3DMapChartshe.vue'
import lineAndebarMapChartStart from './model/lineAndebarMapChartStart.vue'
import barMapGeeChartStart from './model/barMapGeeChartStart.vue'
import bar3DMapChartStart from './model/bar3DMapChartStart.vue'
import lineMapChartStart from './model/lineMapChartStart.vue'
import deviceLinChars from './model/deviceLinChars.vue'
import bar3DMapChartleftStart from './model/bar3DMapChartleftStart.vue'
import { inspectionPlanRecord, getScadaInfoId, getInspectionRecordListByGroupId } from "@/api/site/isRecord";
import { listAlert } from '@/api/iot/alert';
import { listAlertLog, updateAlertLog, getlistByUseType } from '@/api/iot/alertLog';
import { listMaintenance, getMaintenance, addMaintenance, updateMaintenance } from "@/api/iot/maintenance";
import AutoScrollModel from './model/autoScrollModel.vue'
import { listRemind, updateRemind, addRemind } from "@/api/iot/remind";
export default {
    components: {
        bar3DMapChartshe,
        lineAndebarMapChartStart,
        barMapGeeChartStart,
        bar3DMapChartStart,
        lineMapChartStart,
        bar3DMapChartleftStart,
        autoScroll,
        deviceLinChars,
        AutoScrollModel
    },
    dicts: ['maintenance_fan_device'],
    data() {
        return {
            date: new Date(),
            timer: null,
            scaleRatio: 1,
            dayweather: '',
            daytemp: '',
            timeYear: '',
            timeMonth: '',
            timeDay: '',
            currentWeek: '',
            times: '',
            mapInspection: [{ name: 1 }],
            mapInspectionRight: [{ name: 1 }],
            spanColorText: 'today',
            arrowDownName: '',
            groupId: '',
            // 表单参数
            form: {},
            // 是否显示弹出层
            open: false,
            // 表单校验
            rules: {
                remark: [
                    {
                        required: true,
                        message: '处理内容不能为空',
                        trigger: 'blur',
                    },
                ],
            },
            mapInspectionRightOne: [],
            isNumberData: '',
            deviceValue: '',
            deviceList: [],
            rightTimeData: '2',
            listMaintenanceList: [],
            maintenanceForm: {
                groupId: '',
                maintenanceUser: '',
                createTime: '',
            },
            maintenanceOpen: false,
            fanContentArray: [],
            waterQualityList: [{
                COD: 100,
                NH4N: 100,
                TN: 100,
                TP: 100,
                times: '2024-09-11',
                user: '送给大家'
            }, {
                COD: 100,
                NH4N: 100,
                TN: 100,
                TP: 100,
                times: '2024-09-11',
                user: '送给大家'
            }],
            waterQualityOpen: false,
            waterQualityForm: {},
            waterQualityType: 1,
            valueData: [],
            openTimePicker: false,
            valueTimesPicker: [],
            typeTimePicker: 1,
            valueTimesTwo: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: '近 2 小时',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 2);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '今天',
                        onClick(picker) {
                            const start = new Date();
                            start.setDate(start.getDate() - 1);
                            start.setHours(23, 59, 59, 999);
                            const end = new Date();
                            // end.setHours(23, 59, 59, 999);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const end = new Date();
                            end.setDate(end.getDate() - 1);
                            end.setHours(23, 59, 59, 999);
                            const start = new Date();
                            start.setDate(start.getDate() - 2);
                            start.setHours(23, 59, 59, 999);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            end.setHours(23, 59, 59, 0);
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            start.setHours(0, 0, 1, 0);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
            },
            shishiType: 1,
            typeForm: 1,
            shishiOpen: false,
            shishiForm: {
                groupId: '',
                maintenanceUser: '',
                createTime: '',
            },
            listRemindList: []
        }
    },
    mounted() {
        let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            _this.date = new Date(); // 修改数据date
        }, 1000)
        // this.getCurrentPosition()
        this.updateScreenWidth(); // 初始化宽度
        window.addEventListener('resize', this.updateScreenWidth); // 监听窗口大小变化

    },
    created() {
        this.groupId = localStorage.getItem('groupId')
        this.arrowDownName = localStorage.getItem('arrowDownName')
        this.mapFun();
        this.dateFormat();
        this.inspectionPlanRecordFun();

        this.getScadaInfoIdFun();
        this.listMaintenanceFun();
        this.listRemindFun();
    },
    methods: {
        isMoreThanThreeDaysAgo(date) {
            // 获取当前日期
            const today = new Date();
            today.setHours(0, 0, 0, 0); // 清除时分秒，只保留日期

            // 创建传入日期的Date对象
            const targetDate = new Date(date);
            targetDate.setHours(0, 0, 0, 0); // 清除时分秒，只保留日期

            // 计算时间差（毫秒）
            const timeDiff = targetDate.getTime() - today.getTime();
            // 将时间差转换为天数
            const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

            // 判断目标日期是否早于今天且差距大于 3 天
            return dayDiff <= 3;
        },
        listRemindFun() {
            listRemind({
                pageNum: 1,
                pageSize: 30,
                isFinish: 0,
                groupId: this.groupId
            }).then(res => {
                this.listRemindList = res.rows;
            })
        },
        timeShuiliang(type) {
            this.typeTimePicker = type;
            this.openTimePicker = true;
            this.valueTimesPicker = [];
        },
        dataTimePickerChange(e) {
            if (e) {
                this.valueTimesPicker = e;
            } else {
                this.valueTimesPicker = [];
            }
        },
        submitTimePicker() {
            if (this.typeTimePicker == 1) {
                this.valueData = this.valueTimesPicker;
            }
            if (this.typeTimePicker == 2) {
                this.valueTimesTwo = this.valueTimesPicker;
            }
            this.openTimePicker = false;
        },
        dataTimeChange(e) {
            if (e) {
                this.valueData = e;
            } else {
                this.valueData = [];
            }
        },
        waterQualitySpanClick(type) {
            this.waterQualityType = type;
        },
        waterQualityFun() {
            this.waterQualityOpen = true;
            this.waterQualityForm = {

            }
        },
        waterQualityFormSubmit() {
            this.waterQualityForm.grouId = this.groupId;
            this.waterQualityForm.grouName = this.arrowDownName;
            addWaterQuality(this.waterQualityForm).then(res => {
                if (res.code == 200) {
                    this.waterQualityType = 0;
                    this.$message({
                        message: '新增成功',
                        type: 'success',
                    });
                    setTimeout(() => {
                        this.waterQualityOpen = false;
                        this.waterQualityType = 1;

                    }, 500)
                }
            })
        },
        fanContentArrayAdd() {
            this.fanContentArray.push({
                fanContent: null,
                maintenanceContent: null,
            })
        },
        fanContentArrayDel(index) {
            if (this.fanContentArray.length === 1) {
                this.$modal.msgError("至少保留一条数据");
                return;
            }
            this.fanContentArray.splice(index, 1)
        },
        omaintenancesubmitForm() {
            this.maintenanceForm.groupId = this.groupId
            this.maintenanceForm.fanContent = JSON.stringify(this.fanContentArray);
            if (this.omaintenanceId) {
                updateMaintenance(this.maintenanceForm).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                        });
                        this.maintenanceOpen = false;
                        this.listMaintenanceFun()
                    }
                })
            } else {
                addMaintenance(this.maintenanceForm).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '新增成功',
                            type: 'success',
                        });
                        this.maintenanceOpen = false;
                        this.listMaintenanceFun()
                    }
                })
            }
        },
        getMaintenanceFun(id) {
            if (id) {
                this.omaintenanceId = id
                getMaintenance(id).then(res => {
                    if (res.code == 200) {
                        this.maintenanceForm = res.data;
                        this.maintenanceOpen = true;
                        this.fanContentArray = JSON.parse(this.maintenanceForm.fanContent);
                    }
                })
            } else {
                this.maintenanceForm = {

                }
                this.fanContentArray = [];
                this.omaintenanceId = '';
                this.maintenanceOpen = true;
            }
        },
        listMaintenanceFun() {
            listMaintenance({
                pageNum: 1,
                pageSize: 100,
                groupId: this.groupId,
            }).then(res => {
                if (res.code == 200) {
                    this.listMaintenanceList = res.rows
                }
            })
        },
        getScadaInfoIdFun() {
            getScadaInfoId(this.groupId).then(res => {

                this.isNumberData = res.data
                this.listAlertFun();
                this.listAlertOneFun();
                this.getlistByUseTypeFun();
            })
        },
        getlistByUseTypeFun() {
            getlistByUseType({
                serialNumber: this.isNumberData,
            }).then(res => {
                console.log(res);
                this.deviceList = res.data
                this.deviceValue = res.data[0].identifier
            })
        },
        listAlertFun() {
            listAlertLog({
                pageNum: 1,
                pageSize: 10,
                status: 2,
            }).then(res => {
                if (res.code == 200) {
                    this.mapInspectionRight = res.rows
                }
            })
        },
        listAlertOneFun() {
            listAlertLog({
                pageNum: 1,
                pageSize: 10,
                status: 3,
            }).then(res => {
                if (res.code == 200) {
                    this.mapInspectionRightOne = res.rows
                }
            })
        },
        inspectionPlanRecordFun() {
            getInspectionRecordListByGroupId({
                groupId: this.groupId,
                inspectionStatus: 'Y'
            }).then(res => {
                if (res.code == 200) {
                    this.mapInspection = res.data
                }
            })
        },
        dateFormat() {
            const updateTime = () => {
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
                var currentWeek = weekDays[date.getDay()];
                this.timeYear = year;
                this.timeMonth = month;
                this.timeDay = day;
                this.currentWeek = currentWeek;
                this.times = hours + ':' + minutes + ':' + seconds;
            };

            // 初始化时间
            updateTime();

            // 每秒更新一次时间
            setInterval(updateTime, 1000);
            // 拼接
            // return year + "年" + month + "月" + day + "日" + " " + currentWeek + " " + hours + ":" + minutes;
        },
        mapFun() {
            window._AMapSecurityConfig = {
                securityJsCode: "249fc67c47f2650bfeec222499e82c16",
            };
            AMapLoader.reset()
            const _this = this
            AMapLoader.load({
                key: '37ab382ecdb27440a23c0a28853e8c86', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: []  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加
            })
                .then((AMap) => {
                    AMap.plugin('AMap.Weather', function () {
                        //创建天气查询实例
                        var weather = new AMap.Weather();
                        //执行实时天气信息查询
                        weather.getLive('信阳市', function (err, data) {
                            _this.dayweather = data.weather + ' ' + "风向" + data.windDirection + ' ' + "风力" + data.windPower + "级" + ' '
                            _this.daytemp = data.temperature
                        });
                    });
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        mapBlck() {
            this.$emit('success3', {
                type: 1
            })
        },
        spanTextNum(data) {
            this.spanColorText = data
        },
        biaotiLeftImg() {
            this.$emit('success3', {
                type: 2,
                id: this.groupId
            })
        },
        updateScreenWidth() {
            this.screenWidth = window.innerWidth;
            this.scaleRatio = this.screenWidth / 2560
        },
        maptableFun(item, type) {
            this.open = true;
            this.form = item;
            this.typeForm = type;
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.form = {
                remark: '',
            };
        },
        // 确认按钮
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.typeForm == 1) {
                        updateAlertLog(this.form).then((response) => {
                            this.$modal.msgSuccess('处理成功');
                            this.open = false;
                            this.listAlertFun();
                        });
                    }
                    if (this.typeForm == 2) {
                        this.form.isFinish = 1;
                        updateRemind(this.form).then((response) => {
                            this.$modal.msgSuccess('提醒处理成功');
                            this.open = false;
                            this.listRemindFun();
                        });
                    }

                }
            });
        },
        maptitleShishi(type) {
            this.shishiType = type;
        },
        rightTimeSpanFun(data) {
            this.rightTimeData = data;
        },

        deviceValueFun(data) {
            console.log(data, '123123');
            this.deviceValue = data;

        },
        shishiClick() {
            this.shishiOpen = true;
        },
        shihsimaptableFun(item) {
            this.shishiOpen = true;
            this.shishiForm = item
        },
        shishiFormFormSubmit() {
            this.shishiForm.groupId = this.groupId;
            this.shishiForm.maintenanceUser = this.arrowDownName;

            if (this.shishiForm.remindId) {
                updateRemind(this.shishiForm).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                        });
                        this.shishiOpen = false;
                        this.listRemindFun();
                    }
                })

            } else {
                this.shishiForm.isFinish = 0
                this.shishiForm.groupName = this.arrowDownName;
                this.shishiForm.groupId = this.groupId;
                addRemind(this.shishiForm).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '新增成功',
                            type: 'success',
                        });
                        this.shishiOpen = false;
                        this.listRemindFun();
                    }
                })
            }
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.updateScreenWidth); // 移除监听器
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    }
}
</script>

<style lang="scss" scoped>
body,
html {
    margin: 0;
    padding: 0;
}

.pageWarp {
    width: 100vw;
    height: 100vh;
    background-image: url(../imgModel/dapBj.png);
    background-size: 100% 100%;
}

.dap_food {
    width: 100vw;
    height: 50px;
    background-image: url(../imgModel/imgfood.png);
    background-size: 100% 100%;
    position: fixed;
    bottom: 0;
}

.dap_warp {
    width: 2560px;
    height: 1080px;
    transform-origin: 0% 0%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    .dap_header {
        width: 100%;
        background-image: url(../imgModel/imgHeader.png);
        background-size: 100% 100%;
        height: 110px;
        display: flex;

        .header_left {
            width: 500px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 22px;
            color: #FFFFFF;
            text-align: left;
            line-height: 70px;
            padding-left: 30px;
        }

        .header_centeer {
            flex: 1;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 50px;
            color: #FFFFFF;
            text-align: center;
            line-height: 90px;
        }

        .header_right {
            width: 500px;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 22px;
            color: #779DFF;
            text-align: right;
            line-height: 70px;
            display: flex;
            justify-content: flex-end;

            .text {
                color: #FFFFFF;
                font-weight: 400;
            }

            .pading {
                // width: 100px;
                padding-left: 20px;
            }

            .img {
                width: 40px;
                margin: 5px 20px;
            }

        }
    }

    .dap_bottom {
        display: flex;

        .dap_left {
            width: 600px;
            padding: 0 20px;


        }

        .dap_right {
            width: 600px;
            padding: 0 20px;
        }

        .dap_center {
            flex: 1;
            padding: 0 20px;

            .center_img {
                height: 620px;
            }
        }
    }

}

.maptitle {
    margin-left: 51px;
    padding-top: 10px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 22px;
    text-shadow: 0px 3px 3px rgba(0, 38, 95, 0.3);
    text-align: left;
    font-style: normal;
    text-transform: none;
    color: white;
}

.maptitleFlex {
    display: flex;
    justify-content: space-between;

    .maptitleflexText {
        font-size: 16px;

        .spanText {
            padding: 0 5px;
            cursor: pointer;
        }

        .spanColor {
            color: #779DFF;
        }
    }
}

.mapleft_card {
    width: 100%;
    height: 290px;
    background-image: url(../imgModel/imgDiv.png);
    background-size: 100% 100%;
    margin-bottom: 20px;
}



.maptableleft {
    width: 96%;
    height: 200px;
    padding: 10px 0;
    overflow: hidden;
    text-align: center;
    margin: 0px auto;


    ::-webkit-scrollbar {
        display: none;
    }

    .maptable_list {
        display: flex;
        width: 100%;
        height: 28px;
        font-size: 14px;
        background: rgba(0, 170, 255, 0.08);
        border-radius: 0px 0px 0px 0px;
        color: rgba(255, 255, 255, 1);
        padding: 5px;
        margin-top: 3px;

        .maptable_li {
            width: 80px;
            overflow: hidden;
        }
    }


}



.maptableright {
    height: 220px;
    overflow: hidden;
    text-align: center;
    padding: 10px;
    margin: 0px auto;
    margin-top: 5px;

    ::-webkit-scrollbar {
        display: none;
    }

    .maptable_list {
        display: flex;
        width: 100%;
        height: 26px;
        font-size: 14px;
        border-radius: 0px 0px 0px 0px;
        color: rgba(255, 255, 255, 1);
        padding: 5px;
        margin-top: 3px;

        .maptable_li1 {
            width: 130px;
            height: 26px;
            overflow: hidden;
            background-image: url(../imgUrl/mapright001.png);
            text-align: center;
            display: flex;
            padding: 1px 10px;
            line-height: 26px;

            .maptable_li1Text {
                width: 120px;
                white-space: nowrap;
                /* 不换行 */
                overflow: hidden;
                /* 隐藏超出的内容 */
                text-overflow: ellipsis;
                /* 用省略号表示被隐藏的部分 */
            }

        }

        .maptable_li2 {
            flex: 1;
            height: 26px;
            margin-left: 5px;
            line-height: 26px;
            overflow: hidden;
            padding-left: 10px;
            background-image: url(../imgUrl/mapright002.png);
        }


        .maptable_li3 {
            width: 50px;
            height: 26px;
            overflow: hidden;
            background-image: url(../imgUrl/mapright002.png);
            text-align: center;
            display: flex;
            padding: 3px 10px;
            margin-left: 5px;
            cursor: pointer;
        }
    }
}

.dap_biaoti {
    display: flex;
    color: #FFFFFF;
    padding: 0;
    margin-top: -10px;

    .biaotiLeft {
        width: 25vw;
        text-align: right;
        margin-top: -20px;
        padding-right: 20px;
    }

    .biaoticenter {
        flex: 1;
        text-align: center;
        font-size: 30px;
    }
}

::v-deep .el-dialog__header {
    background-color: rgba(0, 55, 86, 1);

    .el-dialog__title {
        color: white;
    }
}

::v-deep .el-dialog__body {
    background-color: rgba(0, 55, 86, 1);

    .el-dialog__title {
        color: white;
    }
}

::v-deep .el-dialog__footer {
    background-color: rgba(0, 55, 86, 1);
}

::v-deep .el-textarea__inner {
    background-color: rgba(0, 55, 86, 1);
    border: 1px solid gainsboro;
    color: white;
}

/* 修改 el-select 输入框的背景颜色 */
::v-deep .el-input__inner {
    background-color: transparent; // 可根据需求修改颜色
    // border: none;
    color: white;
}

::v-deep .el-range-input {
    background-color: rgba(0, 55, 86, 1);
    color: white;
}

.maptable_li1One {
    flex: 1;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    text-align: center;
    display: flex;
    padding: 1px 10px;
    background: rgba(0, 170, 255, 0.08);

    .maptable_li1Text {
        width: 100%;
        white-space: nowrap;
        /* 不换行 */
        overflow: hidden;
        /* 隐藏超出的内容 */
        text-overflow: ellipsis;
        /* 用省略号表示被隐藏的部分 */
    }

}

.maptable_li2One {
    width: 160px;
    height: 26px;
    line-height: 26px;
    margin-left: 5px;
    overflow: hidden;
    padding-left: 10px;
    background: rgba(0, 170, 255, 0.08);
}

.maptable_li3One {
    width: 80px;
    height: 26px;
    overflow: hidden;
    text-align: center;
    display: flex;
    padding: 3px 10px;
    margin-left: 5px;
    cursor: pointer;
    background: rgba(0, 170, 255, 0.08);
}

.mapleftSebei {
    display: flex;
    justify-content: space-between;
    color: white;
    font-size: 18px;

    .mapleftSebei_left {
        margin-left: 51px;
        padding-top: 10px;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 22px;
        text-shadow: 0px 3px 3px rgba(0, 38, 95, 0.3);
        text-align: left;
        font-style: normal;
        text-transform: none;
        color: white;
    }

    .mapleftSebei_right {
        padding-top: 10px;
        display: flex;

        .rightSelect {
            width: 150px;
        }

        .rightTimes {
            padding: 5px;

            .rightTimeSpan {
                padding: 0 5px;
                display: inline-block;

            }

            .rightTimeSpanColor {
                color: #779DFF;
            }
        }
    }
}

.fanContentCss {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.fanContentCssLeft {
    flex: 1;
}

.fanContentCssRight {
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
    cursor: pointer;
}

/* 修改 el-select 输入框的背景颜色 */
::v-deep .el-input__inner {
    background-color: transparent; // 可根据需求修改颜色
    color: #fff; // 可根据需求修改颜色
    border: 1px solid rgba(255, 255, 255, 0.5); // 去掉边框
}

::v-deep .el-range-input {
    background-color: rgba(0, 55, 86, 1);
    color: white;
}

::v-deep .el-form-item__label {
    color: white // 这里可以修改为你想要的颜色值
}

.waterQualitySpan {
    padding: 0 5px;
    font-size: 15px;
    cursor: pointer;
}

.waterQualitySpanColor {
    color: #779DFF;
}

.shishiText {
    color: #fff;
}

.groupTitle {
    color: red;
}
</style>
